import Vue from "vue";
import Router from "vue-router";
// import Home from "@/components/home";
// import MainHeader from "@/components/MainHeader";
// import Users from "@/components/users";

// 路由组件的懒加载，不会一次加载所有路由，使用哪一个，加载哪一个
const Home = () => import("@/components/home");
const Users = () => import("@/components/users");
const Profile = () => import("@/components/profile");
const MainHeader = () => import("@/components/MainHeader");
Vue.use(Router);
// router表示所有的路由组件
// route表示当前在执行的路由组件
const routes = [
  {
    path: "",
    name: "home",
    // 重定项，设置默认路径
    redirect: "/home"
  },
  {
    path: "/home",
    component: Home,
    meta: {
      title: "首页"
    }
  },
  {
    path: "/data",
    name: "MainHeader",
    component: MainHeader,
    meta: {
      title: "数据"
    }
  },
  {
    // 动态绑定usersId
    path: "/users/:usersId",
    component: Users,
    meta: {
      title: "用户"
    }
  },
  {
    path: "/profile",
    component: Profile,
    meta: {
      title: "个人主页"
    }
  }
];
const router = new Router({
  routes,
  mode: "history",
  // 将href模式（/#/data）改为history模式(/data)
  linkActiveClass: "active"
});
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  // document.title = to.meta.title;
  document.title = to.matched[0].meta.title;
  next();
});
export default router;
